/**
 * 弹出框 - 创建、修改
 */
/**
 * TODO formitem 样式
 */


import React from 'react'
import PropTypes from 'prop-types'
import {
  Form,
  Row,
  Col,
  Divider,
  Select,
  DatePicker,
  Input,
  Upload,
  Button,
  Icon,
  InputNumber,
  Radio,
  Modal,
  Cascader,
} from 'antd'
import city from 'utils/city'


const FormItem = Form.Item
const RadioGroup = Radio.Group

// form item 样式
const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}
const LinkModal = ({
                     item = {},
                     editorItem = '',
                     onOk,
                     form: {
                       getFieldDecorator,
                       validateFields,
                       getFieldsValue,
                     },
                     editorProps,
                     radioProps,
                     ...modalProps
                   }) => {

  const {editHtmlContent} = editorProps

  const Option = Select.Option

  const handleOk = () => {
    validateFields((err, fieldsValue) => {
      if (err) {
        return
      }
      const data = {
        ...fieldsValue,
        // TODO 加入文章内容
        // ...getFieldsValue(),
        // content: editHtmlContent,
        "key": item.key,
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form>
        <Row gutter={16}>
          <Col span={24}>
            {/*标题*/}
            <Row gutter={24}>
              <Col span={24}>
                <FormItem>
                  {getFieldDecorator('guid', {
                    initialValue: item.guid,
                    rules: [],
                  })(<Input style={{"display": "none"}} />)}
                </FormItem>
                <FormItem label="标题" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('linkTitle', {
                    initialValue: item.linkTitle,
                    rules: [
                      {
                        required: true,
                        message: "请输入文章标题",
                      },
                    ],
                  })(<Input placeholder="请输入文章标题" />)}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={24}>
                <FormItem label="链接地址" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('linkUrl', {
                    initialValue: item.linkUrl,
                    rules: [{
                      required: true,
                    },
                    ],
                  })(
                    <Input placeholder="请输入链接地址" />,
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={24}>
                <FormItem label="链接图片" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('linkImg', {
                    initialValue: item.linkImg,
                    rules: [],
                  })(
                    <Input placeholder="请输入链接图片" />,
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={24}>
                <FormItem label="排序" hasFeedback {...formItemLayout}>
                  {getFieldDecorator('orderIndex', {
                    initialValue: item.orderIndex,
                    rules: [],
                  })(
                    <Input />,
                  )}
                </FormItem>
              </Col>
            </Row>

            <Row gutter={24}>
              <Col span={24}>
                <FormItem label="链接类型"  {...formItemLayout}>
                  {getFieldDecorator('linkType', {
                    initialValue: item.linkType || 0,
                    rules: [
                      {
                        required: true,
                      },
                    ],
                  })(
                    <RadioGroup>
                      <Radio value="0">图片链接</Radio>
                      <Radio value="1">文字连接</Radio>
                      <Radio value="2">图片和文字链接</Radio>
                      <Radio value="3">下载链接</Radio>
                    </RadioGroup>,
                  )}
                </FormItem>
              </Col>
            </Row>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

LinkModal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(LinkModal)
